import React from 'react'
import {Row, Col, Menu, Form, Dropdown,Modal,message, DatePicker, Input, Button, Table, Tooltip,Select,} from 'antd';
import './AddNewPurchaseOrder.css'
import {DownOutlined, EllipsisOutlined,} from "@ant-design/icons";
import axios from "axios";
import * as url from "../../../util/api";
const {Search} = Input;
const { Option } = Select;
const renderContent = (value, row, index) => {
    const obj = {
        children: value,
        props: {}
    };
    console.log(row);
    if (row.No !== '合计') {
        obj.props.colSpan = 0;
    }

    return obj;
};
function onChange(value) {
    console.log(`selected ${value}`);
}

function onBlur() {
    console.log('blur');
}

function onFocus() {
    console.log('focus');
}

function onSearch(val) {
    console.log('search:', val);
}
const columns = [
    {
        title: '',
        dataIndex: 'No',
        align: 'center',
    },
    {
        title: '',
        dataIndex: 'orderTime',
        align: 'center',
        className: 'addRowIcon'
    },
    {
        title: '主图',
        dataIndex: 'mainPic',
        align: 'center',
        render: (value, row, index) => {
            const obj = {
                children: value,
                props: {},
            };
            if (row.No !== '合计') {
                console.log(obj);
                obj.children=   <Select
                    showSearch
                    style={{width:'100%',textAlign:'left'}}
                    placeholder={'输入编码/商品名称'}
                    optionFilterProp="children"
                    onChange={onChange}
                    onFocus={onFocus}
                    onBlur={onBlur}
                    onSearch={onSearch}
                    filterOption={(input, option) =>
                        option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                >
                    <Option value="女神之泪吊坠">女神之泪吊坠</Option>
                    <Option value="太阳之光吊坠">太阳之光吊坠</Option>
                    <Option value="尼罗河执念手链">尼罗河执念手链</Option>
                </Select>;
                obj.props.colSpan = 3;
            }
            return obj;
        },
    },
    {
        title: '商品编码',
        dataIndex: 'goodsNo',
        render: renderContent,
    },
    {
        title: '商品名称',
        dataIndex: 'goodsName',
        render: renderContent,
    },
    {
        title: '商品规格',
        dataIndex: 'goodsSpecs',
    },
    {
        title: '数量',
        dataIndex: 'num',
    },

    {
        title: '单位',
        dataIndex: 'unit',
    },
    {
        title: '单价',
        dataIndex: 'goodsOrderPrice',
    },
    {
        title: '小计',
        dataIndex: 'countMoney',
    },
    {
        title: '备注',
        dataIndex: 'remarks',
        key: 'remarks',
        align: 'center',

    },
];
const tableData = [
    {
        key: 0,
        No: '1',
        orderTime: <span style={{cursor:'pointer'}}>+</span>,
        customerName: '欧尚超市',
        money: 2000,
        outOfStock: '备货中/待发货',
        state: '待订单审核',
        moneyState: '未收款',
    },
    {
        key: 1,
        No: '合计',
        orderTime: '',
        num: 0,
        countMoney: '0.00',
        customerName: '欧尚超市',
        money: 2000,
        outOfStock: '备货中/待发货',
        state: '待订单审核',
        moneyState: '未收款',
    },

];
const customerSearchColumns = [

    {
        title: '客户名称',
        dataIndex: 'customerName',

    },
    {
        title: '客户编码',
        dataIndex: 'customerNo',

    },
    {
        title: '地区',
        dataIndex: 'area',
    },
    {
        title: '级别',
        dataIndex: 'level',
    },

];
const customerSearchTableData = [
];

class AddNewPurchaseOrder extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            countMoney: '0.00',
            visible: false,
            orderTypeText:'全部级别',
            selectValue:'',
            orderMainId:'',
        }
        // this.handleChange.bind(this)
    }
    showModal = () => {
        this.setState({
            visible: true,

        });
    };
      handleChange(value) {
        console.log(`selected ${value}`);
       this.setState({
           selectValue:value,
       })
    }
    handleOk = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };

    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };
    /*id查询商品信息*/
    selectCustomerInfo = (customerId) => {
        let obj = {customerId:customerId}
        console.log(obj);
        axios({
            url: '/api' + url.orderOrder_examine,//id查询客户信息接口
            method: 'post',
            data: obj,
        }).then(resp => {
            console.log(resp);
            if (resp.data.code === 200) {

            }

        }).catch(err => {
            console.log(err);
        })
    }
    componentDidMount() {
        console.log('componentDidMount');
        axios({
            url: url.orderAddOrderMainId,
            method: 'post',
        }).then(resp => {
            console.log(resp);
           if (resp.data.code === 200) {
               this.setState({
                   orderMainId: resp.data.data.orderMainId
               })
           }

        }).catch(err => {
            console.log(err);
        })
    }
    addNewOrder=()=>{
        let obj={
            clientId: "fdsfdsdfsadf",//客户id
            goodsId: "fdsfasdf",//商品id
            goodsNum: 100,//商品数量
            notes: "买",//商品备注
            orderMainId: this.state.orderMainId,//订单主表id
        }
        axios({
            url: '/api' + url.orderAddOrder,
            method: 'post',
            data:obj,
        }).then(resp => {
            console.log(resp);
            if (resp.data.code === 200) {
                message.success(resp.data.msg)
            }

        }).catch(err => {
            console.log(err);
        })
    }
    render() {
        let {countMoney,} = {...this.state}
        const layout = {
            labelCol: {span: 8},
            wrapperCol: {span: 16},
        };
        const onFinish = values => {
            console.log('Success:', values);
        };

        const onFinishFailed = errorInfo => {
            console.log('Failed:', errorInfo);
        };

        function onChange(date, dateString) {
            console.log(date, dateString);
        }
        const customerTypeMenu = (
            <Menu>
                <Menu.Item>
                    <a className={'全部级别' === this.state.orderTypeText ? "active" : null} rel="noopener noreferrer"
                       href='true'
                       onClick={e => this.handleMenuClick(e, '全部级别')}>
                        全部级别
                    </a>
                </Menu.Item>
                <Menu.Item>
                    <a className={'普通' === this.state.orderTypeText ? "active" : null}
                       rel="noopener noreferrer" href='true' onClick={e => this.handleMenuClick(e, '普通')}>
                        普通
                    </a>
                </Menu.Item>
            </Menu>
        );

        return (<div style={{padding: 10}}>
            <Row>
                <Col span={8} align={'left'}>
                    <Form
                        colon={false}
                        {...layout}
                        name="basic"
                        initialValues={{remember: true}}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                    >
                        <Form.Item
                            label="客户"
                            name="customer"
                            rules={[{required: true, message: '请输入客户名'}]}
                        >
                            <Input placeholder='输入名称/编码/联系人/手机' suffix={
                                    <EllipsisOutlined onClick={this.showModal} style={{fontSize:'1rem'}}/>
                            }/>
                        </Form.Item>

                    </Form>
                    <Modal
                        title=""
                        width={'100%'}
                        visible={this.state.visible}
                        cancelText={'取消'}
                        okText={'确定'}
                        closable={false}
                        footer={[]}
                    >
                        <Row align={'middle'}>
                            <Col span={2} style={{fontSize:'1.2rem'}}>
                                选择客户
                            </Col>
                            <Col span={2}>
                                <Tooltip placement="bottomRight" title={this.state.orderTypeText} mouseLeaveDelay='0' mouseEnterDelay='.5'>
                                    <Dropdown overlay={customerTypeMenu} trigger={['click']}>
                                        <a className="dropdownItem currentOrderType" href='true'
                                           onClick={e => e.preventDefault()}>
                                            {this.state.orderTypeText} <DownOutlined/>
                                        </a>
                                    </Dropdown>
                                </Tooltip>
                            </Col>
                            <Col span={6}>
                                <Search
                                    placeholder="输入名称/编码/联系人/手机"
                                    onSearch={value => console.log(value)}
                                    style={{width: '100%',marginLeft:'-1rem'}}
                                />
                            </Col>
                        </Row>
                        <Row align={'middle'}  style={{marginTop:'1rem'}}>
                            <Col span={24} >
                                <Table
                                    columns={customerSearchColumns}
                                    dataSource={customerSearchTableData}
                                    className='table'
                                />
                            </Col>

                        </Row>
                        <Row align={'middle'} style={{marginTop:'1rem'}}>
                            <Col span={24} align={'left'} style={{paddingRight:'1rem'}}>
                                <Button onClick={this.handleCancel}>取消</Button>
                                <Button onClick={this.handleOk} style={{backgroundColor:'#12C09F',color:'white',margin:'0 1rem'}}>确定</Button>
                                <span style={{color:'#F33333'}}>修改客户后，将清除已选择的商品数据，确定修改？</span>
                            </Col>

                        </Row>

                    </Modal>
                </Col>

            </Row>
            <Row style={{marginTop: 10}} className={'oAddTable'}>
                <Table
                    bordered
                    pagination={{position: ['none', 'none'],}}
                    columns={columns}
                    dataSource={tableData}
                    className='table'
                />

            </Row>
            <Row className='countMoney' align={'middle'}>
                <Col span={22} align='right'>应付金额：</Col>
                <Col span={2} align='center' style={{color: '#F33333', fontSize: '1.2rem'}}>{countMoney}</Col>
            </Row>
            <Row style={{padding: '.5rem 1rem'}} align={'middle'}>
                <Col span={24}>收货信息</Col>

            </Row>
            <Row style={{padding: '.5rem 1rem'}} align={'middle'}>
                <Col span={2}>
                    <span>交货日期</span>
                </Col>
                <Col span={4}>
                    <DatePicker style={{marginLeft: '-2rem', width: '100%'}} placeholder={'请选择日期'} onChange={onChange}/>
                </Col>
            </Row>
            <Row style={{padding: '.5rem 1rem'}} align={'middle'}>
                <Col span={2}>
                    <span>发票信息</span>
                </Col>
                <Col span={4}>
                    <Select defaultValue="1"  style={{marginLeft: '-2rem', width: '100%'}} onChange={this.handleChange.bind(this)}>
                        <Option value="1">不开发票</Option>
                        <Option value="2">增值税普通发票</Option>
                        <Option value="3">增值税专用发票</Option>
                    </Select>
                </Col>
            </Row>
            <Row style={{padding: '.5rem 1rem'}} align={'middle'}>
                <Col span={2}>
                    <span>备注说明</span>
                </Col>
                <Col span={20}>
                    <Input className={'desc'}/>
                </Col>
            </Row>
            <Row style={{padding: '.5rem 1rem'}} align={'middle'}>
                <Col span={2}>
                    <span>附件信息</span>
                </Col>
                <Col span={20}>
                    <span style={{marginLeft: '-2rem'}} className={'fujianBt'}><span
                        className={'iconfont icon-fujian fujian'}/>添加附件</span>
                    <span>（单个附件最大支持20M，支持格式：PDF、Word、Excel、Txt、JPG、PNG、BMP、GIF、RAR、ZIP）</span>
                </Col>
            </Row>
            <Row className={'bottomBt'} align={'middle'}>
                <Col span={12} align={'right'} style={{paddingRight:'1rem'}}>
                    <Button>取消</Button>
                </Col>
                <Col span={12} style={{paddingLeft:'1rem'}}>
                    <Button style={{backgroundColor:'#12C09F',color:'white'}} onClick={this.addNewOrder}>保存</Button>
                </Col>
            </Row>

        </div>);

    }
}

export default AddNewPurchaseOrder
